<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link href="css/iconfont.css" rel="stylesheet" />
		<link href="css/style.css" rel="stylesheet" />
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			.home-page #slider img {
				height: 160px;
			}
			
			.home-page .notice-box {
				background-color: #FFFFFF;
				font-size: 14px;
				display: flex;
				line-height: 40px; 
				padding: 0 12px; 
				height: 40px;
			}
			
			.home-page .notice-box .left {
				width: 60px;
			}
			
			.home-page .notice-box .left img {
				width: 16px;
				vertical-align: middle;
			}
			
			.home-page .notice-box .left span {
				width: 16px;
				vertical-align: middle;
				vertical-align: middle;
			}
			
			.home-page .notice-box .right {
				width: 100%;
				font-size: 14px;
				
			}
		</style>
	</head>

	<body class="home-page">
		<!--<header class="mui-bar mui-bar-nav ">
			<h1 class="mui-title ">标题</h1>
		</header>-->
		<div class="mui-content">
			<div id="slider" class="mui-slider">
				<div class="mui-slider-group mui-slider-loop">
					<!-- 额外增加的一个节点(循环轮播：第一个节点是最后一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="images/banner.png">
						</a>
					</div>
					<!-- 第一张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="images/banner1.png">
						</a>
					</div>
					<!-- 第二张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="images/banner.png">
						</a>
					</div>
					<!-- 第三张 -->
					<div class="mui-slider-item">
						<a href="#">
							<img src="images/banner1.png">
						</a>
					</div>
					<!-- 额外增加的一个节点(循环轮播：最后一个节点是第一张轮播) -->
					<div class="mui-slider-item mui-slider-item-duplicate">
						<a href="#">
							<img src="images/banner1.png">
						</a>
					</div> 
				</div>
				<div class="mui-slider-indicator">
					<div class="mui-indicator mui-active"></div>
					<div class="mui-indicator"></div>
					<div class="mui-indicator"></div>
				</div>
			</div>
			<div class="notice-box">
				<div class="left">
					<img src="images/icon-notice.png" />
					<span>通知</span>
				</div>
				<div class="right ">
					<marquee direction="left" behavior="scroll" scrollamount="3" loop="-1" width="100%" height="30" bgcolor="#FFFFFF" hspace="0" vspace="1" align="absmiddle">
						<span class="font-gray">随便写点内容</span></marquee>

				</div>
			</div>

		</div>
		<nav class="mui-bar mui-bar-tab">
			<a class="mui-tab-item mui-active">
				<span class="mui-icon iconfont icon-message font-18"></span>
				<span class="mui-tab-label">消息</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-phone"></span>
				<span class="mui-tab-label">电话</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-email"></span>
				<span class="mui-tab-label">邮件</span>
			</a>
			<a class="mui-tab-item">
				<span class="mui-icon mui-icon-gear"></span>
				<span class="mui-tab-label">设置</span>
			</a>
		</nav>

		<script>
			mui("#slider").slider({
				interval: 2000 //自动轮播周期，若为0则不自动播放，默认为0；
			})
		</script>

	</body>

</html>